let $ = layui.jquery;
import AddHots from "./addhots.js";

export default class Hots {
    constructor() {
        this.render();
        this.handle();
    }
    //html 页面
    render() {
        let template = `
        <script type="text/html" id="uphotsTemplate"> </script>
        <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
      </script>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">查询</label>
                        <div class="layui-input-inline">
                            <select name="type" lay-verify="required">
                                <option value="name">电影名</option>
                                <option value="time">时长</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="value" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>

                        <div class="layui-input-inline">
                            <button id="queryBtn" type="button" class="layui-btn" lay-filter="formDemo">立即提交</button>
                        </div>
                    </div>
                </form>
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="toolEventDemo">
           
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
   
        `;
        
        $("#content").html(template);
    }

    //js操作
    handle() {
        let table = layui.table;
        let layer = layui.layer;
        table.render({
            id: "myTable",
            elem: '#demo'
            // , height: 312
            , url: '/api/hots/hots' //数据接口
            , page: true //开启分页
            , toolbar: '#toolbarDemo'
            , cols: [[ //表头
                { field: '_id', title: 'id', sort: true, fixed: 'left' }
                , { field: 'name', title: '电影名字' }
                , { field: 'ename', title: '英文名'}
                , { field: 'type', title: '类型' }
                , { field: 'area', title: '地域' }
                , { field: 'score', title: '评分' }
                , { field: 'actor', title: '演员', templet: function (d) { return d.actor[0].name }}
                , { field: 'upDate', title: '年代' }
                , { field: 'time', title: '时长' }
                , { field: 'upDate', title: '上映时间' }
                , { field: 'area', title: '上映地区' }
                , { field: 'count', title: '票房' }
                , { field: 'intro', title: '剧情简介' }
                , { field: 'indexImage', title: '图片' }
                , { field: '', title: '操作', templet: '#toolEventDemo' }
                
            ]]
        });
    
         //条件查询
         $("#queryBtn").on("click", function () {
            let key = $("select[name='type']").val();
            let val = $("input[name='value']").val();
            table.reload('myTable', {
                where: { //设定异步数据接口的额外参数，任意设
                    key,
                    val
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        //新增
          //头工具栏事件
    table.on("toolbar(test)", function (obj) {
        switch (obj.event) {
          case "add":
            new AddHots();
            break;
        }
      });
        

        //删除
        table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('确定删除吗？', function (index) {
                    $.ajax({
                        type: "post",
                        url: "api/hots/deletMovie",
                        data: { _id: data._id },
                        success: function (res) {
                            if (res.code == 200) {
                                layer.close(index);
                                layer.msg(res.msg);
                            } else {
                                layer.msg(res.msg)
                            }
                        }
                    })
                    table.reload("myTable", {});
                });
            } else if (layEvent === 'edit') { //编辑
                alert("没有此选项")

            }
        });
    }
}
